<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>{:session('cp.cpsysname')}--商户管理平台</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="{:config('webconfig.description');}">
    <meta name="keywords" content="{:config('webconfig.keywords');}">
    <meta name="author" content="runoob">
    <link rel="stylesheet" href="__STATIC_URL__/static/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="__STATIC_URL__/static/css/bootstrap-datetimepicker.css"/>
    <link rel="stylesheet" type="text/css" href="__STATIC_URL__/static/css/index.css"/>
    <link rel="stylesheet" type="text/css" href="__STATIC_URL__/static/css/Statistics.css"/>
    <script src="__STATIC_URL__/static/js/jquery-2.1.4.min.js"></script>
    <script src="__STATIC_URL__/static/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="__STATIC_URL__/static/layer/3.0.3/layer.js"></script>
    <script src="__STATIC_URL__/static/js/commen.js"></script>
    <style type="text/css">
        .red {
            color: #FF6667;
        }

        .green {
            color: #66CC99;
        }

        .persont {
            font-size: 12px;
        }

        .card-box {
            height: 153px;

        }

        .layui-laydate {

            z-index: 6666666 !important;

        }

        .widget-box-1 h2 {

            overflow: hidden;

        }

        .Grid {
            display: flex;
        }

        .Grid-cell {
            flex: 1;
            text-align: center;
            margin: 10px;

        }

        .table th, .table td {
            word-break: break-all;
        }

    </style>
</head>
<body>
{include file='public/header'/}
<section>
    <!------------------导航-------------------------->
    {include file='public/left'/}
    <!--------------------------主要内容区域------------------------------------->
    <div class="content">
        <div class="page-heading mgl15 mgr15">
            <ol class="breadcrumb">
                <li>当前位置是&nbsp;:</li>
                <li>
                    <a href="#">交易中心</a>
                </li>
                <li class="active">交易统计</li>
            </ol>
        </div>
        <div class="mgl15 mgr15">
            <div class="panel panel-default panel-search">
                <div class="panel-heading">
                    <h5 class="panel-title"><span class="glyphicon glyphicon-search pull-left"
                                                  style="margin-right: 10px;"></span>条件筛选</h5>
                </div>
                <div class="panel-body">
                    <form action="" method="get" class="form-horizontal table-search form-search" role="form" id="frm">
                        <input type="hidden" name="type" value="search" id="search">
                        <div class="col-sm-6  col-lg-6 ">
                            <div class="form-group">
                                <label class="col-sm-3 control-label">门店：</label>
                                <div class="col-sm-9">
                                    <input type="hidden" name="mchid" id="mchid" value="">
                                    <input class="form-control" id="mac" style=" display: inline-block;" value="全部门店"
                                           data-target="#myModal3" data-toggle="modal"/>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6  col-lg-6 ">
                            <div class="form-group">
                                <label class="col-sm-3 control-label">时间：</label>
                                <div class="col-sm-9">
                                    <div class="input-group">

                                        <input name="search_date" type="text" value="{$p_data['search_date']}"
                                               readonly="readonly" id="search_date" class="form-control"
                                               placeholder="请选择" style="width: 330px">
                                    </div>
                                </div>
                            </div>
                        </div>
                        {eq name=":session('login_top_mid')" value="1"}
                        <div class="col-sm-6  col-lg-6 ">
                            <div class="form-group">
                                <label class="col-sm-3 control-label">款台：</label>
                                <div class="col-sm-9">
                                    <input type="text" name="orderid" class="form-control" placeholder="请输入款台" value="">
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6  col-lg-6">
                            <div class="form-group">
                                <label class="col-sm-3 control-label">收银员：</label>
                                <div class="col-sm-9">
                                    <input type="text" name="d_cashier" class="form-control" placeholder="请输入收银员" value="">
                                </div>
                            </div>
                        </div>
                        {/eq}
                    </form>
                </div>
                <div class="panel-footer">
                    <a href="javascript:;" class="btn btn-primary" onclick="searchform()">查找</a>
                    <a href="javascript:;" class="btn btn-default" onclick="clearform()">清空</a>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h5 class="panel-title">
                        门店分析
                    </h5>
                </div>
                <div class="panel-body">
                    <div class="fenxilist clearfix">
                        <div class="Grid">

                            <div class="Grid-cell">
                                <div class="card-box widget-box-1 bg-white">
                                    <i class="ion-information-circled glyphicon glyphicon-info-sign	 pull-right"
                                       data-toggle="tooltip" data-placement="bottom" title data-original-title="订单的">
                                    </i>
                                    <h4 class="text-dark text-left">应收交易总额(元)</h4>
                                    <h2 class="text-pink text-center">

                                    <span id="z_price" style="float: left;width: 90%;">

                                  </span>
                                    </h2>
                                    <h6 class="text-pink text-right">

                                <span id="z_orders">

                                    </span>
                                        <!--<span>笔</span>-->
                                    </h6>

                                </div>
                            </div>
                            <div class="Grid-cell">
                                <div class="card-box widget-box-1 bg-white">
                                    <i class="ion-information-circled glyphicon glyphicon-info-sign	 pull-right"
                                       data-toggle="tooltip" data-placement="bottom" title data-original-title="订单的">
                                    </i>
                                    <h4 class="text-dark text-left">微信支付(元)</h4>
                                    <h2 class="text-success  text-center">

                                        <span id="wx_price" style="float: left;width: 90%;">
                                    </span>
                                    </h2>
                                    <h6 class="text-success text-right">

                                    <span id="wx_orders">

                                    </span>
                                        <span>笔</span>
                                    </h6>
                                </div>
                            </div>
                            <div class="Grid-cell">
                                <div class="card-box widget-box-1 bg-white">
                                    <i class="ion-information-circled glyphicon glyphicon-info-sign	 pull-right"
                                       data-toggle="tooltip" data-placement="bottom" title data-original-title="订单的">
                                    </i>
                                    <h4 class="text-dark text-left">支付宝支付(元)</h4>
                                    <h2 class="text-warning text-center">

                                        <span id="ali_price" style="float: left;width: 90%;">

                                   </span>
                                    </h2>
                                    <h6 class="text-warning text-right">

                                    <span id="ali_orders">

                                    </span>
                                        <span>笔</span>
                                    </h6>
                                </div>
                            </div>
                            <div class="Grid-cell">
                                <div class="card-box widget-box-1 bg-white">
                                    <i class="ion-information-circled glyphicon glyphicon-info-sign	 pull-right"
                                       data-toggle="tooltip" data-placement="bottom" title data-original-title="订单的">
                                    </i>

                                    <h4 class="text-dark text-left">现金支付(元)</h4>
                                    <h2 class="text-primary text-center">

                                        <span id="cash_price" style="float: left;width: 90%;">

                                  </span>
                                    </h2>
                                    <h6 class="text-primary text-right">

                                    <span id="cash_orders">

                                    </span>
                                        <span>笔</span>
                                    </h6>
                                </div>
                            </div>

                            <div class="Grid-cell">
                                <div class="card-box widget-box-1 bg-white">
                                    <i class="ion-information-circled glyphicon glyphicon-info-sign	 pull-right"
                                       data-toggle="tooltip" data-placement="bottom" title data-original-title="订单的">
                                    </i>
                                    <h4 class="text-dark text-left">会员卡支付(元)</h4>
                                    <h2 class="text-pink text-center">

                                        <span id="card_price" style="float: left;width: 90%;">
                                  </span>
                                    </h2>
                                    <h6 class="text-pink text-right">

                                    <span id="card_orders">

                                    </span>
                                        <span>笔</span>
                                    </h6>
                                </div>
                            </div>


                        </div>
                        <div class="Grid">
                            <div class="Grid-cell">
                                <div class="card-box widget-box-1 bg-white">
                                    <i class="ion-information-circled glyphicon glyphicon-info-sign	 pull-right"
                                       data-toggle="tooltip" data-placement="bottom" title data-original-title="订单的">
                                    </i>
                                    <h4 class="text-dark text-left">客单价(元)</h4>
                                    <h2 class="text-warning text-center">

                                      <span id="dbj" style="float: left;width: 90%;">

                                   </span>
                                    </h2>

                                </div>
                            </div>


                            <div class="Grid-cell">
                                <div class="card-box widget-box-1 bg-white">
                                    <i class="ion-information-circled glyphicon glyphicon-info-sign	 pull-right"
                                       data-toggle="tooltip" data-placement="bottom" title data-original-title="订单的">
                                    </i>

                                    <h4 class="text-dark text-left">退款金额(元)</h4>
                                    <h2 class="text-danger text-center">

                                        <span id="tk_price" style="float: left;width: 90%;"></span>
                                    </h2>
                                    <h6 class="text-danger text-right">

                                     <span id="tk_order">
                                  </span>笔
                                    </h6>
                                </div>
                            </div>


                            <div class="Grid-cell">
                                <div class="card-box widget-box-1 bg-white">
                                    <i class="ion-information-circled glyphicon glyphicon-info-sign	 pull-right"
                                       data-toggle="tooltip" data-placement="bottom" title data-original-title="订单的">
                                    </i>
                                    <h4 class="text-dark text-left">优惠金额(元)</h4>
                                    <h2 class="text-info text-center">

                                    <span id="zk_price" style="float: left;width: 90%;">

                                    </span>

                                    </h2>
                                    <h6 class="text-info text-right">

                                     <span id="">
                                  </span>
                                    </h6>
                                </div>
                            </div>
                            <div class="Grid-cell">
                                <div class="card-box widget-box-1 bg-white">
                                    <i class="ion-information-circled glyphicon glyphicon-info-sign	 pull-right"
                                       data-toggle="tooltip" data-placement="bottom" title data-original-title="订单的">
                                    </i>
                                    <h4 class="text-dark text-left">实收金额(元)</h4>
                                    <h2 class="text-warning  text-center">

                                    <span id="sj_price" style="float: left;width: 90%;">

                                    </span>
                                    </h2>
                                    <h6 class="text-warning text-right">

                                     <span id="">
                                  </span>
                                    </h6>
                                </div>
                            </div>
                            <div class="Grid-cell">
                                <div class="card-box widget-box-1 bg-white">
                                    <i class="ion-information-circled glyphicon glyphicon-info-sign	 pull-right"
                                       data-toggle="tooltip" data-placement="bottom" title data-original-title="订单的">
                                    </i>
                                    <h4 class="text-dark text-left"></h4>
                                    <h2 class="text-info  text-center">

                                      <span id="">

                                    </span>
                                    </h2>
                                    <h6 class="text-info text-right">

                                     <span>
                                  </span>
                                    </h6>
                                </div>
                            </div>
                        </div>


                    </div>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading" style="position:relative;">
                    <h5 class="panel-title">
                        门店列表
                    </h5>
                    <a href="javascript:;" onclick="load();" class="btn btn-info"
                       style="float: right;  margin-top: -24px;">点击下载</a>

                </div>
                <div class="panel-body">
                    <table class="table table-striped" id="tableExcel">
                        <thead>
                        <tr bgcolor="#eee">
                            <th>门店名称</th>

                            <th>微信支付</th>
                            <th>支付宝支付</th>
                            <th>现金支付</th>
                            <th>会员卡支付</th>

                            <th>优惠金额</th>

                            <th>应收交易金额</th>
                            <th>实收金额</th>
                            <th>客单价</th>
                            <th>退款笔数</th>
                            <th>退款金额</th>
                        </tr>
                        </thead>
                        <tbody id="infos">

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        {include file='public/footer'/}
    </div>
</section>
</body>
<!-- Modal -->
<div class="modal fade" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document" style="    width: 600px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel3" style="font-size: 16px;">选择门店</h4>

            </div>
            <div class="modal-body">
                <div class="table-responsive">
                    <table class="table table-bordered">
                        <tr bgcolor="#eee">
                            <th></th>
                            <th>门店</th>

                        </tr>
                        <tbody id="templateHtml3">
                        <tr>
                            <td><input type="checkbox" name="merch" value="" data-mer="全部门店" id="whole"></td>

                            <td>全部门店</td>

                        </tr>
                        {volist name="machlist" id="vo"}

                        <tr>
                            <td><input type="checkbox" name="merch" value="{$vo.mid}" data-mer="{$vo.merchant}"></td>

                            <td>{$vo.merchant}</td>

                        </tr>
                        {/volist}
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="btn();">确定</button>

            </div>
        </div>
    </div>
</div>

<script src="__STATIC_URL__/static/js/commen.js" type="text/javascript" charset="utf-8"></script>
<script src="__STATIC_URL__/static/laydate/laydate.js"></script>
<script>
    $("#whole").click(function(){
        selectAll();
    })
    function selectAll(){
        // console.log(1);
        // console.log($("#checkall").prop("checked"));
        if ($("#whole").prop("checked")) {
            // console.log(2);
            $("input[type='checkbox'][name='merch']").prop("checked",true);//全选
        } else {
            // console.log(3);
            $("input[type='checkbox'][name='merch']").prop("checked",false);  //取消全选
        }
    }
</script>
<script type="text/javascript">
    $(function () {


        //筛选
        function filter() {
            var ii = layer.load();
            setTimeout(function () {
                layer.close(ii);
            }, 1000);
            $("#countform").submit();

        }

        //清空筛选条件
        $(function () {
            $("#payclear").click(function () {
                $(".form-virtical input").val("");
                $(".form-virtical select").val("");
            })
        })
    })
</script>
<script type="text/javascript">
    $(".persontnum").each(function (i) {
        var val = $(this).text();
        var type = val[0];
        if (type == "-") {
            $(this).next(".glyphicon").addClass("glyphicon-arrow-down");
            $(this).next(".glyphicon").addClass("green");
        } else if (type == "+") {
            $(this).next(".glyphicon").addClass("glyphicon-arrow-up");
            $(this).next(".glyphicon").addClass("red");
        }
    })
</script>
<script>
    function searchform() {

        getinfo('search');

    }
    //下载报表
    function load() {
        resdata ="";
        getdata('out_excel');
        // console.log(resdata);
        window.location.href = resdata;


    }

    resdata = "";
    //执行一个laydate实例
    // var s=laydate.now();
    laydate.render({
        elem: '#search_date',
        type: 'datetime',
        range: true,
        change: function (value, date, endDate) { //监听日期被切换
            var s = value.split(" - ");
            var startdate = new Date(s[0]).getTime();
            var enddate = new Date(s[1]).getTime();
            var ldate = Math.floor((enddate - startdate) / (24 * 3600 * 1000));
            if (ldate > 30) {

                layer.alert("日期区间不能大于30天");

                $("#search_date").val("");

            }
        }
    });
    $(function () {
        getinfo('search');
    });

    function getdata(datatype) {
        resdata ="";
        $.ajax({
            url: "{:url('paytest/paycount')}",
            data: {
                search_date: $('#search_date').val(),
                mchid: $('#mchid').val(),
                type: datatype,
            },
            dataType: "json",
            async: false,
            type: "post",
            success: function (res) {

                resdata = res;

            }
        })

    }

    function getinfo(datatype) {
        var index = layer.load(0, {
            shade: [0.1, '#fff'] //0.1透明度的白色背景
        });
        $('#infos').html("");
        getdata(datatype);
        if (resdata.code == 0) {
            //门店统计//
            var jy = resdata.data.jy;
            $("#z_price").text("￥" + jy.ought_fee);
            // $("#z_orders").text(jy.ought_fee_order);
            $("#dbj").text("￥" + jy.avg_fee);

            $("#tk_price").text("￥" + jy.refund_fee);
            $("#tk_order").text(jy.refund_order);
            $("#card_price").text("￥" + jy.wx_card_fee);
            $("#card_orders").text(jy.wx_card_order);

            $("#wx_price").text("￥" + jy.wx_fee);
            $("#wx_orders").text(jy.wx_order);
            $("#ali_price").text("￥" + jy.ali_fee);
            $("#ali_orders").text(jy.ali_order);
            $("#cash_price").text("￥" + jy.cash_fee);
            $("#cash_orders").text(jy.cash_order);
            // $("#cash_orders").text(jy.cash_orders);
            $("#zk_price").text("￥" + jy.dis_fee);
            $("#sj_price").text("￥" + jy.real_fee);
            //时间
            // $("#search_date").val(res.p_data.search_date);


            //门店列表//
            var text = resdata.data.mach;
            var tr = "";
            // console.log(text);
            for (var i = 0; i < text.length; i++) {

                tr += '<tr>' +
                    '<td>' + text[i].merchant + '</td>' +


                    '<td>' + text[i].wx_fee + '</td>' +
                    '<td>' + text[i].ali_fee + '</td>' +
                    '<td>' + text[i].cash_fee + '</td>' +
                    '<td>' + text[i].wx_card_fee + '</td>' +
                    '<td>' + text[i].dis_fee + '</td>' +

                    '<td>' + text[i].ought_fee + '</td>' +
                    '<td>' + text[i].real_fee + '</td>' +
                    '<td>' + text[i].avg_fee + '</td>' +
                    '<td>' + text[i].refund_order + '</td>' +
                    '<td>' + text[i].refund_fee + '</td>' +
                    '</tr>';
            }
            var th = '<tr bgcolor="#eee">' +
                '<td>' + '合计' + '</td>' +
                '<td>' + jy.z_orders + '</td>' +
                '<td>' + jy.z_price + '</td>' +
                '<td>' + jy.zk_price + '</td>' +
                '<td>' + jy.card_price + '</td>' +
                '<td>' + jy.wx_price + '</td>' +
                '<td>' + jy.ali_price + '</td>' +
                '<td>' + jy.cash_price + '</td>' +
                '<td>' + jy.tk_order + '</td>' +
                '<td>' + jy.tk_price + '</td>' +
                '<td>' + jy.dbj + '</td>' +
                '<td>' + jy.sj_price + '</td>' +
                '</tr>';

            $('#infos').html(tr);
            layer.close(index);
        } else {
            layer.alert("系统繁忙，请稍后在试！");
        }

    }
</script>
<script>
    function btn() {
        $('#myModal3').modal('hide');

        var tempArray = new Array();
        var merarray = new Array();
        $("input:checkbox[name='merch']:checked").each(function (i) {

            tempArray[i] = $(this).val();
            merarray[i] = $(this).attr("data-mer");
        });

        var val = tempArray.join(',');
        // var mer=merarray.join(',');
        $("#mchid").val(val);
        var html = "";
        // for (var i = 0; i < merarray.length; i++) {
        //     html+='<span style="display:block">'+merarray[i]+'</span>'
        // }
        $("#mac").val(merarray);
// console.log(val,mer);
    }
</script>
</html>
